<template>
  <div class="bg-gradient-to-br from-gray-600 to-black p-4">
    <div>
      <el-tag type="primary">{{ ext }}</el-tag>

      <el-tag class="ml-2 text-black" type="success">{{ formattedDate(fileObj.LastModified) }}</el-tag>
      <el-tag class="ml-2" type="danger">{{ formatBytes(fileObj.Size) }}</el-tag>
      <el-link class="ml-4" type="success">{{ fileObj.url }}</el-link>
    </div>
    <div class="mt-6">
      <div v-if="ext === 'Word'">
        <vue-office-docx :src="fileObj.url" style="height: 100vh" />
      </div>
      <div v-else-if="ext === 'Excel'">
        <vue-office-excel :src="fileObj.url" style="height: 100vh" />
      </div>
      <div v-else-if="ext === 'PDF'">
        <vue-office-pdf :src="fileObj.url" style="height: 100vh" />
      </div>
      <div v-if="ext === '图片' || ext === 'SVG'">
        <img :src="fileObj.url" style="max-height: 60vh; margin: 0 auto" />
      </div>
      <div v-else-if="ext === '视频'">
        <video :src="fileObj.url" controls style="height: auto; margin: 0 auto" />
      </div>
      <div v-else-if="ext === '音频'">
        <audio :src="fileObj.url" controls style="height: 50px; margin: 0 auto" />
      </div>
      <div class="text-left" v-else-if="ext === 'JavaScript' || ext === 'HTML' || ext === 'CSS' || ext === 'JSON'">
        <!-- 使用代码高亮组件来展示文件内容 -->

        <highlightjs autodetect :code="fileObj.content" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 安装
// #docx文档预览组件
// npm install @vue-office/docx vue-demi@0.14.6

// #excel文档预览组件
// npm install @vue-office/excel vue-demi@0.14.6

// #pdf文档预览组件
// npm install @vue-office/excel vue-demi@0.14.6
// 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

// npm install @vue/composition-api

import { ref, reactive, toRefs, onMounted, computed, getCurrentInstance } from 'vue';

const instance = getCurrentInstance();

const props = defineProps({
  fileObj: Object, // Define qweather as an object prop
  ext: String,
});
function formatBytes(bytes) {
  if (bytes === 0) {
    return '0 Bytes';
  }

  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
}
function formattedDate(LastModified) {
  return instance.appContext.config.globalProperties.$moment(LastModified).format('YYYY-MM-DD');
}
</script>
<style scoped lang="less"></style>
